<template>
  <div class="home-container">
    <!-- 1.顶部栏 -->
    <van-nav-bar fixed placeholder>
      <!-- 左侧插槽  -->
      <template #left>
        <!-- <img src="../../assets/logo.png" alt="" width="100px"> -->
        <div class="logo"></div>
      </template>
      <!-- 右侧插槽 -->
      <template #right>
        <van-button icon="search" round type="primary" @click="$router.push('/search')">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 2.tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item.art_id" :title="item.title"
            @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <template #label>
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item v-for="(value,index) in item.cover.images" :key="index">
                      <van-image
                        :src="value"
                        lazy-load
                      />
                    </van-grid-item>
                  </van-grid>
                  <div>
                    <span>{{ item.aut_name }}</span>&nbsp;
                    <span>{{ item.comm_count }}评论</span>&nbsp;
                    <span>{{ item.pubdate | fromNow }}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//导入接口
import { getChannelList,getArticleList } from './home.js'
//导入moment
import moment from 'moment'
//设置语言
moment.locale('zh-cn')

export default {
  name: 'home',
  data () {
    return {
      active: 0,
      loading: false, //上拉 加载更多动画
      finished: false, //上拉  加载全部数据开关
      list: [], //文章列表数据
      isLoading: false, //下拉 刷新动画
      channels:[],//频道列表
      timestamp:null//时间戳
    }
  },
  async created() {
    //1.加载频道列表
    let res = await getChannelList()
    console.log(res)
    //1.1 绑定数据
    this.channels = res.data.data.channels
  },
  methods: {
    /* 1.上拉加载更多 */
    async onLoad () {
      
      //2.加载文章列表

      //2.1 判断是不是第一页
      if( !this.timestamp ){
        this.timestamp = Date.now()
      }
      //2.2 请求数据
      let res = await getArticleList({
        channel_id:this.channels[this.active].id,
        timestamp:this.timestamp
      })
      //2.3 绑定数据
      this.timestamp = res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      console.log(res)
      
      //2.4 关闭加载动画
      this.loading = false
      //2.5 最多50条，如果所有元素加载完毕，则停止滚动
      if (this.list.length >= 50) {
        this.finished = true
      }
     
    },
    /* 2.下拉刷新事件 */
    onRefresh () {
      //清空时间戳，作用是下拉刷新之后从第一页开始请求
      this.timestamp = null
      //(0)一旦下拉刷新，无条件修改上拉列表finished为false
      this.finished = false
      //(1)清空当前数据
      this.list = []
      //(2)重新加载数据
      this.loading = true
      this.onLoad()
      //(3)关闭下拉刷新动画，否则顶部动画会一直转圈
      this.isLoading = false
    },
    /* 3.tab栏点击 */
    tabClick(){
      //tab栏点击相当于下拉刷新请求新的数据
      this.onRefresh()
    }
  },
  /* 过滤器 */
  filters:{
    fromNow(value){
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.home-container {

  .van-nav-bar{
    z-index: 10;
  }

  /* 1.顶部栏 */
  .van-nav-bar__content {
    background-color: #009afb;
    .logo {
      width: 100px;
      /* 注意点
      1.如果在背景图中使用@,则会默认前面加一个 ./@, 导致项目运行报错
      2.解决： 在@前面添加波浪号~,取消@前面的./
        ~@
      */
      background: url('~@/assets/logo.png') no-repeat;
      background-size: cover;
      height: 30px;
    }

    .van-button {
      background-color: #00affd;
      width: 100px;
      height: 30px;
      border: 1px solid transparent;
      .van-icon {
        color: #fff;
      }
    }
  }

  /* 2.tab栏 */

  .van-tabs {
    /* 头部区域 */
    .van-tabs__wrap {
      position: fixed;
      top: 46px;
      /* 添加层级避免被覆盖 */
      z-index: 10;
      /* 给宽度作用是可以实现点击自动滚动 */
      width: 100%;
    }

    /* 底部内容 */
    .van-tabs__content {
      /* 解决tabs头部固定定位脱标遮挡标准流 */
      margin-top: 44px;
      /* 设置margin-bottom与底部栏对齐。这样盒子的高度就限制了。刚好卡在两个盒子中间 */
      margin-bottom: 0px;
    }
  }
}
</style>
